<template>
  <div>
    <h4 style="margin:0 0 10px 0">
      <el-row>
        <el-col :span="19">
          <span v-if="editData">编辑医生</span>
          <span v-else>添加医生</span>
          
        </el-col>
        <el-col :span="5" style="text-align:right">
          <i class="el-icon-error" style="background:#e6e6e6" @click="resetForm('ruleForm2')"></i>
        </el-col>
      </el-row>
    </h4>
      <el-form :model="ruleForm2"  ref="ruleForm2" label-width="120px" class="demo-ruleForm">
        <el-form-item label="姓名:" prop="name">
          <el-input v-model.number="ruleForm2.name" style="width:60%"></el-input>
        </el-form-item>
        <el-form-item label="工作时间:">
          <el-input v-model.number="ruleForm2.work_time" style="width:60%"></el-input>
        </el-form-item>
        <el-form-item label="擅长:" prop="skill">
          <el-input v-model="ruleForm2.skill" oninput="if(value.length > 11)value = value.slice(0, 20)" style="width:60%"></el-input>
          <span>{{ruleForm2.skill.length}}/20</span>
        </el-form-item>
        <el-form-item label="简介:" prop="checkPass">
          <el-input type="textarea" :rows="7" placeholder="请输入内容" v-model="ruleForm2.introduction"></el-input>
        </el-form-item>
       
        <el-form-item label="照片:" prop="odress" style="width:60%">
          <div>
              <el-upload 
                class="avatar-uploaderInfo"
                action="https://upload.qiniup.com/"
                :show-file-list="false"
                :on-success="handleOkLogo"
                :before-upload="beforeAvatarUpload"
                :data="postData">
                <img v-if="ruleForm2.header_url" :src="ruleForm2.header_url" class="avatarInfo">
                <i v-else class="el-icon-plus avatar-uploader-iconInfo"></i>
              </el-upload>
          </div>
        </el-form-item>

        <el-form-item label="医生执业证:" prop="odress">
          <div>
            <el-upload 
              class="avatar-uploaderInfo"
              action="https://upload.qiniup.com/"
              :show-file-list="false"
              :on-success="handleOkdoctor"
              :before-upload="beforeAvatarUpload"
              :data="postData">
                <img v-if="ruleForm2.cert_url" :src="ruleForm2.cert_url" class="avatarInfo">
                <i v-else class="el-icon-plus avatar-uploader-iconInfo"></i>
            </el-upload>
          </div>
        </el-form-item>

        <el-form-item label="医生资格证:" prop="odress" style="width:60%">
          <div>
            <el-row>
              <el-col :span="24">
                <ul class="el-upload-list el-upload-list--picture-card">
                  <li style="float:left" :tabindex="index" class="el-upload-list__item is-success" v-for="(item,index) in fileList3" :key="index">
                    <img :src="item" alt="" class="el-upload-list__item-thumbnail">
                    <span class="el-upload-list__item-actions">
                      <span class="el-upload-list__item-preview" @click="shouimg(item)"><i class="el-icon-zoom-in"></i></span>
                      <span class="el-upload-list__item-delete" @click="deletImg(index)"><i class="el-icon-delete"></i></span>
                    </span>
                  </li>
                </ul>
                <el-upload 
                  style="float:left;width:178px;height:178px"
                  action="https://upload.qiniup.com/"
                  list-type="picture-card"
                  :show-file-list="false"
                  :before-upload="beforeAvatarUpload"
                  :on-success="handleOkList"
                  :data="postData">
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-col>
            </el-row>
          </div>
        </el-form-item>
        
         <el-form-item >
          <el-row style="width:60%">
            <div style="color:#ccc">信息提交后，牙记将1-2个工作日内完成审核</div>
            <el-col :span="12"><el-button type="warning" @click="submitForm(1)">保 存</el-button></el-col>
            <el-col :span="12"><el-button type="primary" @click="submitForm(0)">提交审核</el-button></el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
  </div>
</template>

<script>
import Http from '@/Http/Http'
export default {
  props:['editData'],
  data() {
    return {
      postData:{
        token:'',
      },
      dialogVisible:false,
      dialogImageUrl:'',
      tokenimgUrl:'',
      fileList3:[],
      ruleForm2: {
        skill: '', //擅长
        cert_url:'',
        doctor1:'',
        introduction:'', //简介
        checkPass:'',
        name:'',
        checkSta: '',
        work_time: '',
        header_url:'' //头像
      }
    };
  },
  created(){
    console.log(this.editData)
    this.getToken()
  },
  methods: {
    getToken() {
      Http.QiniuToken({})
      .then( res => {
        this.postData.token = res.data.data.uptoken;
        this.tokenimgUrl = res.data.data.domain
      })
      .catch( error => {
        this.$message.error('服务器请求失败，请重新登录')
        console.log(error)
      })
  
      if (this.editData) {
        this.ruleForm2.name = this.editData.name 
        this.ruleForm2.introduction = this.editData.introduction 
        this.ruleForm2.skill = this.editData.skill 
        this.ruleForm2.work_time = this.editData.work_time 
        this.ruleForm2.header_url = this.editData.header_url 
        this.ruleForm2.cert_url = this.editData.cert_url 
        this.fileList3 = this.editData.certs
      }
    },
    
    handleOkLogo(responed) {
      console.log(responed)
      this.ruleForm2.header_url = `http://${this.tokenimgUrl}/${responed.key}`;
      console.log('上传图片',this.ruleForm2.header_url)
    },

    handleOkdoctor(responed) {
      console.log(responed)
      this.ruleForm2.cert_url = `http://${this.tokenimgUrl}/${responed.key}`;
    },


    // 图片列表 方法  ----------------------
    
    handleOkList(responed) {
      this.fileList3.push(`http://${this.tokenimgUrl}/${responed.key}`);
      
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      if (isJPG || isPNG) {
        return true;
      } else {
          this.$message.error('上传图片格式不正确!');
        return false;
      }
    },
     // 图片列表 方法  ----------------------
    shouimg(val){
      this.dialogVisible = true;
      this.dialogImageUrl = val;
    },
    deletImg(index) {
      this.fileList3.splice(index,1)
    },
  
    submitForm(val) {
      console.log(val)
      if (!this.ruleForm2.name){ this.$message.error('请输入医生姓名'); return }
      if (!this.ruleForm2.work_time){ this.$message.error('请输入工作时间'); return }
      if (!this.ruleForm2.skill){ this.$message.error('擅长不能位空'); return }
      if (!this.ruleForm2.header_url){ this.$message.error('请上传头像'); return }
      const obj = {
        "is_draft":val,
        "name":this.ruleForm2.name, //名字
        "introduction":this.ruleForm2.introduction, //简介
        "skill":this.ruleForm2.skill, //擅长
        "work_time":this.ruleForm2.work_time, //工作时间
        "header_url":this.ruleForm2.header_url, //头像
        "cert_url":this.ruleForm2.cert_url,
        "certs":this.fileList3
      }
      this.editData ? this.editFun(obj,val) : this.addFun(obj,val);
    },
    addFun(obj,val){
       Http.addDoctorInsert(obj)
      .then( res => {
        if (res.data.code == 200) {
          if(val==0){
           this.$message.success('提交成功')
          }else if (val ==1 ){
            this.$message.success('保存成功')
          }
          this.$emit('colseFun')
        } else {
          this.$message.error('操作失败')
        }
      })
    },
    editFun(obj,val){
      obj.id = this.editData.id;
      console.log(obj)
       Http.editDoctorInsert(obj)
      .then( res => {
        if (res.data.code == 200) {
          if(val==0){
           this.$message.success('提交成功')
          }else if (val ==1 ){
            this.$message.success('保存成功')
          }
          this.$emit('colseFun')
        } else {
          this.$message.error('操作失败')
        }
      })
    },
    resetForm(formName) {
      console.log(2222)
      this.$refs[formName].resetFields();
      this.$emit('colseFun')
    },
    handleClose(){
      this.$emit('colseFun')
    }
  }
}
</script>

<style>
.disabled .el-upload--picture-card {
    display: none;
}
.avatar-uploaderInfo .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploaderInfo .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-iconInfo {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px !important;
  text-align: center;
}
.avatarInfo {
  width: 148px;
  height: 148px;
  display: block;
}
</style>
